
<template>
  <div id="code">
    <div class="top">
      <input type="text" placeholder="请输入兑换码" v-model="code">
      <img @click="scanQRCode" id="scanQRCode" src="../../../wechat/static/images/smxh_ewm.png" alt>
    </div>
    <a href="javascript:;" @click="getCode">核销</a>
    <tabbar>
      <tabbar-item selected>
        <img slot="icon" src="../../../wechat/static/images/tab_hx_s.png">
        <span slot="label" style="font-family: PingFang-SC-Medium;
    font-size: 0.24rem;
    color: #ec1b24;">核销</span>
      </tabbar-item>
      <tabbar-item link="/orderData">
        <img slot="icon" src="../../../wechat/static/images/tab_ddsj_n.png">
        <span slot="label" style="font-family: PingFang-SC-Medium;
    font-size: 0.24rem;
    color: #999999;">订单数据</span>
      </tabbar-item>
      <tabbar-item link="/centerB">
        <img slot="icon" src="../../../wechat/static/images/tab_grzx_n.png">
        <span slot="label" style="font-family: PingFang-SC-Medium;
    font-size: 0.24rem;
    color: #999999;">个人中心</span>
      </tabbar-item>
    </tabbar>
  </div>
</template>

<script>
import { Tabbar, TabbarItem } from "vux";
export default {
  name: "code",
  data() {
    return {
      code: ""
    };
  },
  mounted() {
    this.configSet()
    if (!localStorage.getItem("storeName")) {
      this.getDetail();
    }
    if(sessionStorage.getItem('autoscanQRCode')){
      this.autoscanQRCode()
    }
  },
  created() {},
  methods: {
    configSet(){
      var pageUrl = window.location.href
      let url = `${this.$CONSTANT.WX.indexJsRequire}?url=${pageUrl}`;
      this.$common.post(url, {}, res => {
          if (res.status == 200) {
            let data = res.data.bussData;
            wx.config({
                debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                appId: data.appId, // 必填，公众号的唯一标识
                timestamp: data.timestamp, // 必填，生成签名的时间戳
                nonceStr: data.nonceStr, // 必填，生成签名的随机串
                signature: data.signature, // 必填，签名
                jsApiList: [
                        "checkJsApi", //判断当前客户端版本是否支持指定JS接口
                        "previewImage",
                        "onMenuShareTimeline", //分享到朋友圈
                        "onMenuShareAppMessage", //分享给朋友
                        "openLocation",
                        "getLocation",
                        "scanQRCode",
                        "chooseWXPay"
                    ] // 必填，需要使用的JS接口列表
            });
          } else {
            this.$vux.toast.show({
              text: res.msg,
              type: "warn",
              width: "auto"
            });
          }
        });
    },
    getDetail() {
      let url =
        this.$CONSTANT.STORE.findEsStoreById +
        "?sessionId=" +
        this.$common.getCookie("sessionId");
      let param = {};
      // this.$vux.loading.show({
      //   text: "Loading"
      // });
      this.$common.post(url, param, res => {
        setTimeout(() => {
          this.$vux.loading.hide();
        }, 800);
        if (res.status == 200) {
          var bussData = res.data.bussData;
          localStorage.setItem("userId", bussData.userId);
          localStorage.setItem("storeName", bussData.storeName);
          localStorage.setItem("storeId", bussData.id);
          localStorage.setItem("storeBrandName", bussData.esBrandDTO.brandName);
          localStorage.setItem("storeBrandId", bussData.brandId);
          localStorage.setItem("storeUserName", bussData.userName);
        } else {
          this.$vux.toast.show({
            text: res.msg,
            type: "warn",
            width: "auto"
          });
        }
      });
    },
    getCode() {
      if (!this.code) {
        this.$vux.toast.show({
          text: "兑换码不能为空",
          type: "warn",
          width: "auto"
        });
        return;
      }
      let url =
        this.$CONSTANT.COUPON.saveEsVirtualCardUseRecord +
        "?sessionId=" +
        this.$common.getCookie("sessionId") +
        "&goodsCode=" +
        this.code;
      let param = "";
      this.$vux.loading.show({
        text: "正在提交数据"
      });
      localStorage.setItem("qrcode", "");
      setTimeout(() => {
        this.$common.post(url, param, res => {
          this.$vux.loading.hide();
          if (res.status == 200) {
            this.code = "";
            var bussData = res.data.bussData;
            this.$vux.toast.show({
              text: res.msg,
              type: "",
              width: "auto"
            });
          } else {
            this.$vux.toast.show({
              text: res.msg,
              type: "warn",
              width: "auto"
            });
          }
        });
      }, 1000);
    },
    scanQRCode() {
      console.log("111");
      var that = this;
      wx.checkJsApi({
          jsApiList: ['scanQRCode'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
          success: function(res2) {
            // 以键值对的形式返回，可用的api值true，不可用为false
            // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
            console.log('resultresult2')
            console.log(res2)
            var checkResult = res2.checkResult
            console.log(checkResult)
            if(typeof checkResult =='string'? JSON.parse(checkResult).scanQRCode:checkResult.scanQRCode){
                wx.scanQRCode({
                  needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
                  scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
                  success: function(res) {
                    var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
                    console.log('resultresult')
                    console.log(result)
                    that.code = result
                  },
                  fail(err){
                    console.error(err)
                    console.log('wx.scanQRCode')
                    sessionStorage.setItem('autoscanQRCode','1')
                  }
                });
            }else {
              sessionStorage.setItem('autoscanQRCode','1')
            }
          },
          fail(err){
            console.error(err)
            sessionStorage.setItem('autoscanQRCode','1')
            location.reload()
          }
      });
    },
    autoscanQRCode(){
      var that = this;
      sessionStorage.setItem('autoscanQRCode','')
        wx.scanQRCode({
          needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
          scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
          success: function(res) {
            var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
            console.log('resultresult')
            console.log(result)
            that.code = result
          }
        });
    }
  },
  components: {
    Tabbar,
    TabbarItem
  }
};
</script>

<style lang="less">
#code {
  .top {
    height: 42px;
    line-height: 42px;
    padding-top: 91px;
    text-align: center;
    input {
      // height: 42px;
      // line-height: 42px;
      width: 65.1%;
      background: #fff;
      border: 1px solid transparent;
      border-radius: 5px;
      margin: 0 13px 0;
      padding: 12px 0;
      font-family: PingFang-SC-Bold;font-weight: 600;
      font-size: 14px;
      color: #333;
      padding-left: 23px;
    }
    img {
      width: 25px;
      height: 25px;
      vertical-align: middle;
    }
  }
  > a {
    margin-top: 74px;
    margin-left: 38.1%;
    text-align: center;
    display: inline-block;
    width: 24%;
    height: 35px;
    line-height: 35px;
    border: 1px solid transparent;
    border-radius: 18px;
    background-color: #f02931;
    font-family: PingFang-SC-Bold;font-weight: 600;
    font-size: 14px;
    color: #fff;
    text-align: center;
    &:hover {
      background-color: #e1252c;
    }
  }
  .weui-tabbar {
    position: fixed;
    .weui-tabbar__item {
      img {
        width: 21px;
        height: 21px;
        margin-top: 3px;
      }
    }
    .weui-bar__item_on {
      img {
        width: 23px;
        height: 21px;
      }
      .weui-tabbar__label {
        span {
          font-family: PingFang-SC-Medium;
          font-size: 12px;
          color: #ec1b24;
        }
      }
    }
    &:before {
      border: none;
    }
  }
}
</style>
